<%--

  @author yulezhisi
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>构成分析</title>

    <link rel="shortcut icon" href="<c:url value="/images/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
    <script src="<c:url value="/layui/layui.js"/>"></script>
    <link rel="stylesheet" type="text/css" href="<c:url value="/layui/css/layui.css"/>">

    <script src="<c:url value="/js/echarts.js"/>"></script>

    <script src="<c:url value="/js/my/commons.js"/>"></script>
    <style>
        .container {
            width: 1200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="card">
        <div class="layui-card-header layui-form ">
            <div class="layui-form-item">
                <label class="layui-form-label">报表方式</label>
                <div class="layui-input-block" style="width:400px">
                    <select name="group" lay-filter="group">
                        <option value="level">按等级查看</option>
                        <option value="credit">按信用度查看</option>
                        <option value="maturity">按满意度查看</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div id="salesOfType" style="width: 800px; height: 600px;display: inline-block; "></div>
        </div>
    </div>

</div>

<script>
    /**
     *  echarts
     *
     *  ajax动态加载数据
     *  1.将数据配置置空
     *  2.通过ajax获取数据 再动态渲染option
     *
     * */
    var group = 'level';
    layui.use(['form'],function () {
        var form=layui.form;

        //绑定一个document组件
        var charts = echarts.init($('#salesOfType')[0]);
        // 图表的配置项和数据
        var option = {
            //设置标题
            title: {
                text: '用户的构成信息'
                // , subtext: '副标题'
                , x: 'center'
            }
            , tooltip: {}

            //饼图必须 标题  [name,...]
            , legend: {
                data: []
                , orient: 'vertical'
                , x: 'left button'
            }

            //饼图必须  二维的map集合数据  [{name:'' , value: '},{...}]
            , series: [{
                name: '销量'
                , type: 'pie'
                , data: []
            }]
        };

        // 使用配置项渲染
        charts.setOption(option);

        form.on('select(group)', function (data) {0
            group = data.value;
            $.ajax({
                url: basePath + '/count/component/' + group + '.do'
                , dataType: 'json'
                , success: function (data) {
                    //再次渲染添加数据
                    charts.setOption({
                        legend: {
                            //这里设置标题
                            data: data.name
                            , orient: 'vertical'
                            , x: 'left button'
                        }
                        , series: [{
                            name: '销量'
                            , type: 'pie'
                            //这里设置对应的数据
                            , data: data.data
                        }]
                    })
                }
            })

        });

        /*=====动态加载数据 ====================================================================*/
        $.ajax({
            url: basePath + '/count/component/' + group + '.do'
            , dataType: 'json'
            , success: function (data) {
                //再次渲染添加数据
                charts.setOption({
                    legend: {
                        //这里设置标题
                        data: data.name
                        , orient: 'vertical'
                        , x: 'left button'
                    }
                    , series: [{
                        name: '销量'
                        , type: 'pie'
                        //这里设置对应的数据
                        , data: data.data
                    }]
                })
            }
        })

    });

</script>

</body>
</html>
